<template>
  <div class="page">
    <div class="left">
      <div class="left-top-box">
        <img
          src="https://image.xuexiwangzhe.com/Fly4MobvA-5pEcFq6GbmnyBWxaPZ"
          class="left-logo"
        />
        <div class="left-new-btn-box">
          <button
            class="left-new-btn"
            v-click-outside="closeNewMenu"
            @click.stop="newMenuShow = !newMenuShow"
          >
            <img
              src="https://image.xuexiwangzhe.com/Fm4zF_f0mr9dLzF0cPgY_ta-s6XA"
              class="left-new-btn-img"
            />
            新建
          </button>
          <div
            class="left-new-modal"
            :class="{ 'left-new-modal-actived': newMenuShow }"
          >
            <div class="left-new-modal-item" @click="createProject">
              <img
                class="left-new-modal-item-img"
                src="https://image.xuexiwangzhe.com/FtRc9tNNjawctK1q5qXiuZd4x6Rf"
              />
              <div class="left-new-modal-item-text">新建项目</div>
            </div>
            <div class="left-new-modal-item" @click="createFolder">
              <img
                class="left-new-modal-item-img"
                src="https://image.xuexiwangzhe.com/Fv54Sw73dClwS2RIEeSX0Ebh7gu8"
              />
              <div class="left-new-modal-item-text">新建文件夹</div>
            </div>
          </div>
        </div>
        <button class="left-pic-btn">
          <img
            src="https://image.xuexiwangzhe.com/FoRdMaXWClLH1TtyZiXuD2OmNsE8"
            class="left-pic-btn-img"
          />
          素材库
        </button>
      </div>
      <ul class="left-nav-ul">
        <li
          class="left-nav-item"
          :class="{ 'left-nav-item-actived': navActived == 'home' }"
          @click="navActived = 'home'"
        >
          <img
            class="left-nav-item-img"
            v-if="navActived == 'home'"
            src="https://image.xuexiwangzhe.com/Fo0K-5VW-fSv67hKDWoMBAoNC-n-"
          />
          <img
            v-else
            class="left-nav-item-img"
            src="https://image.xuexiwangzhe.com/Fn49zB_9QnNbKBNOtWS_QnN9Ecda"
          />

          <span>首页</span>
        </li>
        <li
          class="left-nav-item"
          :class="{ 'left-nav-item-actived': navActived == 'project' }"
          @click="navActived = 'project'"
        >
          <img
            src="https://image.xuexiwangzhe.com/FnzUzdW51YpaSnUC15qXGf7KL16v"
            class="left-nav-item-img"
            v-if="navActived == 'project'"
          />
          <img
            class="left-nav-item-img"
            v-else
            src="https://image.xuexiwangzhe.com/FnsxMjCbQRUI552c_f9Yfn0kEH-9"
          />
          <span class="left-nav-item-project-text">我的项目</span>
          <img
            class="left-nav-item-arrow-img"
            v-if="projectFolderShow"
            @click.stop="projectFolderShow = false"
            src="https://image.xuexiwangzhe.com/FnR5O-iWZ13pHT-T-Y_bs5CeUknS"
          />
          <img
            class="left-nav-item-arrow-img"
            v-else
            @click.stop="projectFolderShow = true"
            src="https://image.xuexiwangzhe.com/FoDXNOoJr7DjTGbnMqJE58rfzXJy"
          />
        </li>
        <li v-if="projectFolderShow">
          <folder
            :refresh="folderTreeRefreshTime"
            @click-folder-node="handleClickFolderNode"
            @click-folder-node-ungrouped="handleClickFolderNodeUnGrouped"
            @select-folder-node="handleSelectFolderNode"
            @click-folder-node-clear="handleClickFolderNodeClear"
            :nodeselectid="selectFolderId"
            :nodegetdataid="selectFolderGetDataId"
          ></folder>
        </li>
        <li
          class="left-nav-item"
          :class="{ 'left-nav-item-actived': navActived == 'recycle' }"
          @click="navActived = 'recycle'"
        >
          <img
            src="https://image.xuexiwangzhe.com/FmrsAjzPYASLyW3qzsdtBievQEft"
            class="left-nav-item-img"
            v-if="navActived == 'recycle'"
          />
          <img
            v-else
            class="left-nav-item-img"
            src="https://image.xuexiwangzhe.com/FmxYuDNugQR5v7aJF68c9ltq6SBL"
          />
          <span>回收站</span>
        </li>
      </ul>
    </div>
    <div class="right">
      <div class="right-top">
        <div class="right-search-box">
          <img
            src="https://image.xuexiwangzhe.com/FhotGbXAQPUwj7FGqrAATCSiuX7j"
            class="right-search-img"
            @click="search"
          />
          <input
            class="right-search-input"
            type="text"
            v-model="searchText"
            @keydown.enter="search"
          />
          <img
            class="fork"
            @click="searchFork"
            src="http://image.xuexiwangzhe.com/FntFrbfm8ymlbZJePFgQjRdNNdCf"
          />
        </div>
        <div class="right-tools-box">
          <div class="right-version-box">
            <div class="right-version-sign">免费版</div>
            <div class="right-version-update">马上升级</div>
          </div>
          <div class="right-message-box">
            <img
              src="https://image.xuexiwangzhe.com/Fk_5fAUWDm795vNm-4rVWN2unuup"
              class="right-message-img"
            />
          </div>
          <img
            src="https://image.xuexiwangzhe.com/FlA-JQmiij6ICayXxjSueqQDc9S-"
            class="right-menu-img"
          />
          <div
            class="right-user-img"
            @click="toggleSetMenu"
            v-click-outside="closeSetMenu"
          >
            <img
              :src="'https://image.xuexiwangzhe.com/' + userData.userAvatar"
              class="right-avatar"
            />
            <!-- <img
              src="https://image.xuexiwangzhe.com/FuOQO0qhwvt-7T41IkL-TvF6jDy_"
              class="right-avatar"
            /> -->
            <set-menu ref="setMenu" :data="userData"></set-menu>
          </div>
        </div>
      </div>
      <div class="right-main">
        <home-box
          @edit-folder="handleEditFolder"
          @delete-folder="handleDeleteFolder"
          @new-project="handleNewProject"
          @new-folder="handleNewFolder"
          v-if="navActived == 'home'"
        ></home-box>
        <project-box
          @edit-folder="handleEditFolder"
          @delete-folder="handleDeleteFolder"
          @move-folder="handleMoveFolder"
          @new-project="handleNewProject"
          @new-folder="handleNewFolder"
          :newprojectdata="newProjectData"
          :data="folderData"
          v-if="navActived == 'project' || selectFolderId != -10"
        ></project-box>
        <search-box
          @new-project="handleNewProject"
          @new-folder="handleNewFolder"
          @edit-folder="handleEditFolder"
          @delete-folder="handleDeleteFolder"
          v-if="searchShow"
          ref="searchBox"
        ></search-box>
        <recycle-box
          @new-project="handleNewProject"
          @new-folder="handleNewFolder"
          @restore-folder="handleRestoreFolder"
          @permanentlydelete-folder="handlePermanentlyDeleteFolder"
          v-if="navActived == 'recycle'"
        ></recycle-box>
      </div>
      <!-- <message></message> -->
    </div>
    <create-project
      @create-project="handleCreateProject"
      ref="createProject"
    ></create-project>
    <create-folder
      @create-folder="handleCreateFolder"
      ref="createFolder"
    ></create-folder>
  </div>
</template>

<script>
import message from "./components/message";
import createProject from "./components/create-project";
import createFolder from "./components/create-folder";
import folder from "./components/folder";
import homeBox from "./components/homeBox";
import projectBox from "./components/projectBox";
import recycleBox from "./components/recycleBox";
import searchBox from "./components/searchBox";
import setMenu from "./components/setMenu";
export default {
  data() {
    return {
      navActived: "home",
      folderTreeRefreshTime: new Date().getTime(),
      folderData: {},
      // folderDataLast: false, // tree树查询数据分页
      selectFolderId: -10,
      selectFolderGetDataId: -10, // 用于跳转指定tree树根目录获取数据
      projectFolderShow: false,
      newMenuShow: false,
      newProjectData: {},
      searchText: "", // 搜索文本
      searchShow: false, // 是否点击了搜索
      userData: {}, // 用户数据
    };
  },
  watch: {
    selectFolderId(newVal, oldVal) {
      if (newVal != -10) {
        this.navActived = "";
      }
    },
    navActived(newVal, oldVal) {
      if (newVal != "") {
        this.selectFolderId = -10;
        this.$store.commit("setSelectedFolderId", -10);
      }
    },
  },
  components: {
    message,
    createProject,
    createFolder,
    folder,
    homeBox,
    recycleBox,
    projectBox,
    searchBox,
    setMenu,
  },
  created() {
    this.getUserData();
  },
  methods: {
    // 获取用户数据
    getUserData() {
      this.$axios.get("user/getUserInfo", {}).then((res) => {
        if (res.success) {
          this.userData = res;
        }
      });
    },
    createProject() {
      this.$refs.createProject.changeSimpleDialog();
    },
    createFolder() {
      this.$refs.createFolder.changeSimpleDialog();
    },
    refreshFolderTree() {
      this.folderTreeRefreshTime = new Date().getTime();
    },
    handleCreateProject(data) {
      if (this.selectFolderId == -2) {
        this.newProjectData = data;
      } else {
        this.selectFolderId = -2;
        this.selectFolderGetDataId = -2;
      }
      this.$message.success("创建成功");
    },
    handleCreateFolder() {
      this.refreshFolderTree();
    },
    handleEditFolder() {
      this.refreshFolderTree();
    },
    handleDeleteFolder() {
      this.refreshFolderTree();
    },
    handleMoveFolder() {
      this.refreshFolderTree();
    },
    handleRestoreFolder() {
      this.refreshFolderTree();
    },
    handlePermanentlyDeleteFolder() {
      this.refreshFolderTree();
    },
    handleClickFolderNode(data) {
      this.folderData = data;
    },
    handleClickFolderNodeUnGrouped(data) {
      if (!this.folderData.projects) {
        this.folderData["projects"] = data.list;
      } else {
        this.folderData.projects = [...this.folderData.projects, ...data.list];
      }
    },
    handleClickFolderNodeClear() {
      this.folderData = {};
    },
    handleSelectFolderNode(id) {
      this.selectFolderId = id;
    },
    handleNewProject() {
      this.createProject();
    },
    handleNewFolder() {
      this.createFolder();
    },
    closeNewMenu() {
      this.newMenuShow = false;
    },
    // 搜索
    search() {
      this.searchShow = true;
      this.$nextTick(() => {
        this.$refs.searchBox.search(this.searchText);
      });
    },
    // 取消搜索
    searchFork() {
      this.searchShow = false;
      this.searchText = "";
    },
    toggleSetMenu() {
      this.$refs.setMenu.toggleSetMenu();
    },
    openSetMenu() {
      this.$refs.setMenu.openSetMenu();
    },
    closeSetMenu() {
      this.$refs.setMenu.closeSetMenu();
    },
  },
};
</script>

<style lang="less">
html,
body {
  width: 100%;
  height: 100%;
}

.page {
  display: flex;
  height: 100%;
}

.left {
  width: 250px;
  height: 100%;
  overflow-y: auto;
  background-color: #fff;
}

.left-top-box {
  padding-top: 24px;
  padding-left: 26px;
  padding-right: 26px;
  padding-bottom: 36px;
}

.left-logo {
  display: block;
  width: 125px;
  margin-bottom: 35px;
}

.left-new-btn-box {
  position: relative;
}

.left-new-modal {
  display: none;
  position: absolute;
  z-index: -1;
  top: 41px;
  left: 0;
  width: 100%;
  height: 78px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  box-shadow: 0px 2px 6px 0px rgba(102, 102, 102, 0.2);
  border-radius: 3px;
  transform: translateY(-15px);
  transition: all 0.1s;
  opacity: 0;
}

.left-new-modal-actived {
  z-index: 10;
  opacity: 1;
  transform: translateY(0);
  transition-duration: 0.25s;
}

.left-new-modal-item {
  &:last-child {
    margin-right: 0;
  }
  cursor: pointer;
  margin-right: 26px;
}

.left-new-modal-item-img {
  width: 24px;
  display: block;
  margin: 0 auto 6px auto;
}

.left-new-modal-item-text {
  color: #666;
}

.left-new-btn {
  width: 100%;
  font-weight: bold;
  background-color: #265cff;
  color: #fff;
  margin-bottom: 12px;
  height: 40px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  border: 0;
}

.left-new-btn-img,
.left-pic-btn-img {
  width: 18px;
  margin-right: 6px;
}

.left-pic-btn {
  width: 100%;
  font-weight: bold;
  height: 40px;
  border-radius: 3px;
  border: 1px solid #cccccc;
  background-color: #fff;
  color: #666666;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.left-nav-ul {
  padding-left: 0;
}

.left-nav-item {
  padding-left: 26px;
  padding-top: 11px;
  padding-bottom: 11px;
  color: #333;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.left-nav-item-project-text {
  margin-right: 6px;
}

.left-nav-item-arrow-img {
  width: 12px;
  cursor: pointer;
}

.left-nav-item-actived {
  font-weight: bold;
  background-color: #f2f4f8;
}

.left-nav-item-img {
  width: 20px;
  margin-right: 6px;
}

.right {
  width: calc(100% - 250px);
  height: 100%;
  background-color: #f2f4f8;
  overflow-x: auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.right-main {
  width: 901px;
  padding: 0 30px;
  margin: 0 auto;
  min-height: calc(100% - 85px);
  position: relative;
}

@media screen and (min-width: 1420px) {
  .right-main {
    width: 1190px;
  }
}

@media screen and (min-width: 1920px) {
  .right-main {
    width: 1479px;
  }
}

.right-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 23px;
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: 27px;
}

.right-search-box {
  display: flex;
  align-items: center;
  width: 431px;
  height: 35px;
  border-radius: 15px;
  background-color: #fff;
  padding: 9px 15px;
  position: relative;

  .fork {
    width: 12px;
    height: 12px;
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    cursor: pointer;
  }
}

.right-search-input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: none;
  position: relative;
  padding-right: 20px;
}

.right-search-img {
  width: 15px;
  margin-right: 9px;
  cursor: pointer;
}

.right-tools-box {
  display: flex;
  align-items: center;
  position: relative;
}

.right-version-box {
  display: flex;
  align-items: center;
  margin-right: 39px;
}

.right-version-sign {
  width: 67px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background: linear-gradient(90deg, #f2d69d 0%, #f2ce85 100%);
  border-radius: 3px;
  margin-right: 9px;
  color: #664d1a;
}

.right-version-update {
  cursor: pointer;
  color: #265cff;
}

.right-message-box {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  margin-right: 27px;
}

.right-message-img {
  width: 18px;
}

.right-menu-img {
  width: 18px;
  margin-right: 33px;
}

.right-user-img {
  width: 21px;
}
.right-avatar {
  width: 21px;
  height: 21px;
  object-fit: cover;
  border-radius: 50%;
  cursor: pointer;
  display: block;
}
</style>
